<template>
  <div class="container">
    <Breadcrumb :items="['menu.user', 'menu.user.setting']" />
    <a-card class="general-card">
      <template #title> 个人设置 </template>
      <a-row class="wrapper">
        <a-col :span="15">
          <a-form
            ref="formRef"
            :model="editFormModel"
            class="form"
            :label-col-props="{ span: 8 }"
            :wrapper-col-props="{ span: 16 }"
          >
            <a-form-item
              field="name"
              label="姓名"
              :rules="[{ required: true, message: '请输入姓名' }]"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="editFormModel.name" placeholder="请输入姓名" />
            </a-form-item>
            <a-form-item
              field="region"
              label="区域"
              :rules="[{ required: false, message: '请输入区域' }]"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="editFormModel.region" placeholder="请输入区域" disabled />
            </a-form-item>
            <a-form-item
              field="jobNumber"
              label="工号"
              :rules="[{ required: false, message: '请输入工号' }]"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="editFormModel.jobNumber" placeholder="请输入工号" disabled />
            </a-form-item>
            <a-form-item
              field="mobile"
              label="电话"
              :rules="[{ required: false, message: '请输入电话' }]"
              :validate-trigger="['change', 'input']"
            >
              <a-input
                v-model="editFormModel.mobile"
                placeholder="请输入电话"
              />
            </a-form-item>
            <a-form-item
              field="email"
              label="邮件"
              :rules="[{ required: false, message: '请输入邮件' }]"
              :validate-trigger="['change', 'input']"
            >
              <a-input v-model="editFormModel.email" placeholder="请输入邮件" />
            </a-form-item>
            <a-form-item
              field="oldPassWord"
              label="原密码"
              :rules="[{ required: false, message: '请输入原密码' }]"
              :validate-trigger="['change', 'blur']"
              val
            >
              <a-input-password
                v-model="editFormModel.oldPassWord"
                placeholder="不修改无需填写"
                allow-clear
              >
              </a-input-password>
            </a-form-item>
            <a-form-item
              field="passWord"
              label="新密码"
              :rules="passWordRules"
              :validate-trigger="['change', 'blur']"
              val
            >
              <a-input-password
                v-model="editFormModel.passWord"
                placeholder="新密码至少8个字符"
                allow-clear
              >
              </a-input-password>
            </a-form-item>
            <a-form-item
              field="againPassword"
              label="再次密码"
              :rules="againPassWordRules"
              :validate-trigger="['change', 'blur']"
              val
            >
              <a-input-password
                v-model="editFormModel.againPassword"
                placeholder="再次密码至少8个字符"
                allow-clear
              >
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button type="primary" @click="handleSubmit"> 保存 </a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Message } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { FormInstance } from '@arco-design/web-vue/es/form';
  import { getUserInfo, submitPesionForm } from '@/api/persion';

  const { loading, setLoading } = useLoading();
  const formRef = ref<FormInstance>();
  const editFormModel = reactive({
    name: '',
    userName: '',
    region: '',
    jobNumber: '',
    mobile: '',
    email: '',
    oldPassWord: '',
    passWord: '',
    againPassword: '',
  });

  const passWordRules = [
    {
      validator: (value: string, cb: any) => {
        if (typeof value !== 'undefined' && value !== '') {
          if (
            !/^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&^()_-])[A-Za-z\d$@$!%*#?&^()_-]{8,}$/.test(
              value
            )
          ) {
            cb('至少8个字符，至少1个字母，1个数字和1个特殊字符!');
          }
        }
      },
      required: false,
    },
  ];

  const againPassWordRules = [
    {
      validator: (value: string, cb: any) => {
        if (
          typeof editFormModel.passWord !== 'undefined' &&
          editFormModel.passWord !== ''
        ) {
          if (value !== 'undefined' && value === '') {
            cb('请输入确认密码');
          } else if (value !== editFormModel.passWord) {
            cb('确认密码与密码不一致');
          }
        }
      },
      required: false,
    },
  ];

  const fetchInfo = async () => {
    // setLoading(true);
    const res = await getUserInfo();
    if (res.status === 200) {
      editFormModel.name = res.data.name;
      editFormModel.userName = res.data.userName;
      editFormModel.region = res.data.region;
      editFormModel.jobNumber = res.data.jobNumber;
      editFormModel.mobile = res.data.mobile;
      editFormModel.email = res.data.email;
    }
  };

  fetchInfo();
  const handleSubmit = async () => {
    setLoading(true);
    const res = await formRef.value?.validate();
    if (!res) {
      const rep = await submitPesionForm(editFormModel);
      if (rep.status === 200) {
        Message.success(rep.statusText);
      } else {
        Message.error(rep.statusText);
      }
      setTimeout(() => {
        setLoading(false);
      }, 1000);
    }
  };
</script>

<script lang="ts">
  export default {
    name: 'Setting',
  };
</script>

<style scoped lang="less">
  .container {
    padding: 0 20px 20px 20px;
  }

  .wrapper {
    min-height: 580px;
    padding: 20px 0 0 20px;
    background-color: var(--color-bg-2);
    border-radius: 4px;
  }

  :deep(.section-title) {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 14px;
  }
</style>
